<!-- 导航条 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" th:fragment="navbar">
    <a class="navbar-brand" th:href="@{/index}">OpenLearning</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse"  id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" th:href="@{/word/WorkBookUpdate}">默默背单词</a>
            </li>
        </ul>
        <ul class="navbar-nav mr-0">
            <li class="nav-item">
                <a class="nav-link" th:href="@{/word/wordDict}">词典</a>
            </li>
            <span class="navbar-text" th:if="${session.user}!=null" th:text="'用户:' + ${session.user.username}"></span>
            <li class="nav-item active" th:if="${session.user}==null">
                <a class="nav-link"  th:href="@{/login}">登录/注册</a>
            </li>
            <li class="nav-item active" th:if="${session.user}!=null">
                <a class="nav-link" th:href="@{/quit.do}">注销</a>
            </li>
        </ul>
    </div>
</nav>

<!-- 注册模块 -->
<div th:fragment="loginOrRegister">
    <form method="post" th:action="@{/login.do}">
        <br>
        <h3>登录/注册</h3>
        <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping1">用户名/手机号</span>
            </div>
            <input type="text" name="username" class="form-control" placeholder="用户名/手机号" aria-label="Username" aria-describedby="addon-wrapping1">
        </div>
        <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping2">密码</span>
            </div>
            <input type="password" name="password" class="form-control" placeholder="密码" aria-label="Username" aria-describedby="addon-wrapping">
        </div>
        <button type="submit" class="btn btn-primary btn-lg btn-block">登录/注册</button>
    </form>
</div>

<!-- 字典显示 -->
<div th:fragment="wordDictShow">

    <h3>全部单词</h3>
    <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1">
        <div class="col" th:each="word : ${pageWordDict.list}">
            <div class="card border-0">
                <div class="card-body">
                    <h5 class="card-title" th:text="${word.word}"></h5>
                    <p class="card-text">
                        <span class="badge badge-pill badge-success">英</span><span th:text="${word.englishPronunciation}"></span>
                        <span class="badge badge-pill badge-info">美</span><span th:text="${word.americaPronunciation}"></span>
                    </p>
                    <p class="card-text" th:text="${word.meaning}"></p>
                </div>
            </div>
        </div>
    </div>

    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" th:if="not ${pageWordDict.isFirstPage }"><a class="page-link" th:href="@{/word/wordDict}+'?start=1'">首页</a></li>
            <li class="page-item" th:if="${pageWordDict.hasPreviousPage}"><a class="page-link" th:href="@{/word/wordDict}+'?start='+ ${pageWordDict.prePage}" >上一页</a></li>
            <li class="page-item active"><a class="page-link" th:href="@{/word/wordDict}+'?start='+ ${pageWordDict.pageNum}" th:text="第+${pageWordDict.pageNum}+页"></a></li>
            <li class="page-item" th:if="${pageWordDict.hasNextPage }"><a class="page-link" th:href="@{/word/wordDict}+'?start='+ ${pageWordDict.pageNum+1}">下一页</a></li>
            <li class="page-item" th:if="not ${pageWordDict.isLastPage }"><a class="page-link" th:href="@{/word/wordDict}+'?start='+${pageWordDict.pages}">最后一页</a></li>
        </ul>
    </nav>

</div>



<!-- 搜索单词模块 -->
<div th:fragment="wordSearch">
    <form th:action="@{/word/searchWord}">
        <div class="input-group input-group-lg" >
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-lg">单词搜索</span>
            </div>
            <input th:if="not ${wordInfo}" type="text" name="word" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
            <input th:if="${wordInfo}" th:value="${wordInfo.word}" type="text" name="word" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">

            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="submit" id="button-addon2">搜索</button>
            </div>
        </div>
    </form>
    <br>
    <div class="col" th:if="${wordInfo}">
        <div class="card border-0">
            <div class="card-body">
                <h5 class="card-title" th:text="${wordInfo.word}"></h5>
                <p class="card-text">
                    <span class="badge badge-pill badge-success">英</span><span th:text="${wordInfo.englishPronunciation}"></span>
                    <span class="badge badge-pill badge-info">美</span><span th:text="${wordInfo.americaPronunciation}"></span>
                </p>
                <!-- <span class="badge badge-pill badge-light card-text" th:text="${word.meaning}"></span> -->
                <p class="card-text" th:text="${wordInfo.meaning}"></p>
            </div>
        </div>
    </div>
</div>

<div th:fragment="WorkReciteNavlist(active1,active2,active3,active4)">
    <br>
    <ul class="nav nav-tabs" >
        <li class="nav-item">
            <a th:class="${active1}" th:href="@{/word/WorkBookUpdate}">上传单词书</a>
        </li>
        <li class="nav-item">
            <a th:class="${active2}" th:href="@{/word/setting}">设置</a>
        </li>
        <li class="nav-item">
            <a th:class="${active3}" th:href="@{/word/WordRecite}">背诵</a>
        </li>
<!--        <li class="nav-item dropdown">-->
<!--            <a th:class="${active3} + ' dropdown-toggle '" th:href="@{/word/WordRecite}" data-toggle="dropdown" role="button" aria-expanded="false">背诵</a>-->
<!--            <div class="dropdown-menu">-->
<!--                <a class="dropdown-item" th:href="@{/word/WordRecite}">背诵模式</a>-->
<!--                <a class="dropdown-item" href="#">复习模式</a>-->
<!--            </div>-->
<!--        </li>-->
        <li class="nav-item">
            <a th:class="${active4}">数据分析</a>
        </li>
    </ul>
    <br>
</div>

<!-- 进度条模板  -->
<div th:fragment="progressBar">
    <div class="progress mb-3" >
        <div class="progress-bar progress-bar-striped progress-bar-animated" th:if="${session.step}"  th:style="'width:' + ${session.step*20} + '%'" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="4"></div>
        <div class="progress-bar progress-bar-striped progress-bar-animated" th:if="not ${session.step}"  th:style="'width:' + 0 + '%'" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="4"></div>
    </div>
</div>

<div class="alert alert-info" role="alert" th:fragment="reciteTips">
    当前阶段，单词默认认识，不认识则需要手动点击操作（太简单了=不复习已精通）（忘记了=清空熟悉度，重新背）（不确定=我多复习一下）
</div>

<!--  复习模式的模板  -->
<div th:id="'word-control-'+${uniqueKey}" th:fragment="wordShowTemplate(step,uniqueKey,word,enAn,usaAn,wordMeaning)">
    <div class="card text-center ">
        <div class="card-header p-1 text-left" th:if="${step}!=4">
            <button th:if="${step}==1" type="button" class="btn btn-outline-success btn-sm"
                    data-operate="word-easy" th:data-word-id="${uniqueKey}" th:data-word="${word}"->太简单</button>
            <button th:if="${step}==2" type="button" class="btn btn-outline-secondary btn-sm"
                    data-operate="word-no-sure" th:data-word-id="${uniqueKey}" th:data-word="${word}">不确定</button>
            <button th:if="${step}==3" type="button" class="float-right btn btn-outline-danger btn-sm"
                    data-operate="word-forget" th:data-word-id="${uniqueKey}" th:data-word="${word}">忘记了</button>
        </div>
        <div class="card-body p-2">
            <div class="col">
                <div class="card border-0">
                    <div class="card-body p-0">
                        <h5 class="card-title" th:text="${word}">a</h5>
                        <p class="card-text">
                            <span class="badge badge-pill badge-success">英</span><span th:text="${enAn}">[英:测试]</span>
                            <span class="badge badge-pill badge-info">美</span><span th:text="${usaAn}">[美:测试]</span>
                        </p>
                        <p class="card-text" th:if="${step}==1" th:text="${wordMeaning}"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer p-0">
            <div class="card border-0">
                <div class="card-header p-1">
                    <button class="btn btn-outline-primary float-left btn-sm" data-toggle="collapse"
                            th:data-target="'#'+'word_'+${uniqueKey}+'1'" aria-expanded="false"
                            th:aria-controls="'word_'+${uniqueKey}+'1'">
                        <span>记笔记</span>
                    </button>

                    <button th:if="${step}==2 or ${step}==3 or ${step}==4" type="button" class="btn btn-secondary btn-sm"
                            data-container="body" data-toggle="popover" data-placement="top"
                            th:data-content="${wordMeaning}">
                        翻译
                    </button>


                    <button th:if="${step}==4" type="button" class="btn btn-success btn-sm"
                            data-operate="word-remember" th:data-word-id="${uniqueKey}" th:data-word="${word}">我记得</button>

                    <button class="btn btn-outline-info float-right btn-sm" data-toggle="collapse"
                            th:data-target="'#'+'word_'+${uniqueKey}+'2'" aria-expanded="false"
                            th:aria-controls="'word_'+${uniqueKey}+'2'">
                        <span>笔记</span>
                        <span class="badge badge-pill badge-dark">4</span>
                    </button>
                </div>
                <div class="card-body p-0 collapse" th:id="'word_'+${uniqueKey}+'1'">
                    <div class="input-group border-0">
                        <textarea class="form-control border-0" placeholder="请输入笔记内容"></textarea>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer p-0">
            <div class="card border-0">
                <div class="collapse" th:id="'word_'+${uniqueKey}+'2'">
                    <div class="card-body">
                        这个单词有很多意思，比如说啊，又比如
                    </div>
                    <div class="card-body">
                        这个单词有很多意思，比如说啊，又比如
                    </div>
                    <div  class="card-body text-center ">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination m-0">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-3"></div>
</div>

<!-- 后端脚本  -->
<script th:fragment="wordReciteJs">
    $("button[data-operate='word-easy']").on('click',function (event){
        const word = $(this).data('word')
        const wordId = $(this).data('word-id')
        $("#word-control-"+wordId).parent().slideUp(500,function (){
            this.remove()
        })

        $.ajax({
            url:"wordEasy.do",
            contentType: 'application/json',
            dataType: "json",
            data:JSON.stringify({"word":word,'wordId':wordId}),
            type:'post',
            success:function(data){
                console.log(data)
            },
        })

    })


    $("button[data-operate='word-no-sure']").on('click',function (event){
        const word = $(this).data('word')
        const wordId = $(this).data('word-id')
        $("#word-control-"+wordId).parent().slideUp(500,function (){
            this.remove()
        })


        $.ajax({
            url:"wordNoSure.do",
            contentType: 'application/json',
            dataType: "json",
            data:JSON.stringify({"word":word,'wordId':wordId}),
            type:'post',
            success:function(data){
                console.log(data)
            },
        })

    })

    $("button[data-operate='word-forget']").on('click',function (event){
        const word = $(this).data('word')
        const wordId = $(this).data('word-id')
        $("#word-control-"+wordId).parent().slideUp(500,function (){
            this.remove()
        })

        $.ajax({
            url:"wordForget.do",
            contentType: 'application/json',
            dataType: "json",
            data:JSON.stringify({"word":word,'wordId':wordId}),
            type:'post',
            success:function(data){
                console.log(data)
            },
        })

    })

    $("button[data-operate='word-remember']").on('click',function (event){
        const word = $(this).data('word')
        const wordId = $(this).data('word-id')
        $("#word-control-"+wordId).parent().slideUp(500,function (){
            this.remove()
        })

        $.ajax({
            url:"wordRemember.do",
            contentType: 'application/json',
            dataType: "json",
            data:JSON.stringify({"word":word,'wordId':wordId}),
            type:'post',
            success:function(data){
                console.log(data)
            },
        })

    })

</script>

